<!DOCTYPE html>
<html lang="zh-ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .topbar {
            width: 100%;
            height: 100px;
            background-color: rgb(209 10 10);
            position: relative;
        }
        .w {
            width: 1200px;
            margin: 0 auto;
        }
        .topbar img {
            width: 1200px;
            height: 100px;
        }

        .btn-close {
            width: 26px;
            height: 26px;
            background-color: green;
            position: absolute;
            right: 200px;
            top: 10px;
            z-index: 1000;
            cursor: pointer;
        }
        .btn-close .icon {
            display: block;
            width: 26px;
            height: 26px;
            background-image: url(./image/close.jpg);
            background-size: 26px 26px;
        }
    </style>
     <script>
        //  DOM操作
        //  页面渲染完毕了吗 ? 没有
        //  console.log(document.body);

        // 如果你的脚本写在head标签的时候，涉及dom编程时，别忘了执行onload事件
        window.onload = function(){
            // 要求： 
                // 点击关闭按钮，移除链接广告

            // 思考：
                // 点击的是哪个标签
                // 删除的的时哪个标签（隐藏）

            // 编码:
                // 1.0 获取页面相关的标签
                var topbar = document.querySelector(".topbar");
                var btnClose = document.querySelector(".btn-close");
                // console.log(topbar,btnClose);
                // 2.0 事件绑定
                btnClose.onclick = function(){
                    // 3.0 处理逻辑
                    // 移除标签
                    // topbar.remove();
                    // 设置标签隐藏（不占位置）
                    topbar.style["display"] = "none";
                }


        }
    </script>
</head>
<body>
    <div class="topbar">
        <div class="w">
            <a href="#"><img src="./image/luzhou.jpg" alt=""></a>
        </div>
        <div class="btn-close">
            <span class="icon"></span>
        </div>
    </div>

</body>
</html>